<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .upload{
            height: 100vh;
            display: flow-root;
            /*border: 1px dashed #ccc;*/
            /*border-radius: 20px;*/
            /*background: #fff;*/
            text-align: center;
            transition: ease all 0.3s;
            position: relative;
            /*background-color: #76daff;*/
            overflow: hidden;
        }

        .tip{
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 1;
            font-size: 5vw;
        }

        .upload input {
            opacity: 0;
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            z-index: 10;
            cursor: pointer;
        }
        .upload {
            position: relative;
            min-height: 100vh;
            background-color: #76daff;
            overflow: hidden;
        }
        .upload:before, .upload:after {
            content: "";
            position: absolute;
            left: 50%;
            min-width: 300vw;
            min-height: 300vw;
            background-color: #fff;
            animation-name: rotate;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            z-index: 0;
        }
        .upload:before {
            bottom: 15vh;
            border-radius: 45%;
            -webkit-animation-duration: 10s;
            animation-duration: 10s;
        }
        .upload:after {
            bottom: 12vh;
            opacity: .5;
            border-radius: 47%;
            -webkit-animation-duration: 10s;
            animation-duration: 10s;
        }

        @keyframes rotate {
            0% {
                -webkit-transform: translate(-50%, 0) rotateZ(0deg);
                transform: translate(-50%, 0) rotateZ(0deg);
            }
            50% {
                -webkit-transform: translate(-50%, -2%) rotateZ(180deg);
                transform: translate(-50%, -2%) rotateZ(180deg);
            }
            100% {
                -webkit-transform: translate(-50%, 0%) rotateZ(360deg);
                transform: translate(-50%, 0%) rotateZ(360deg);
            }
        }

        .forbid {
            pointer-events: none;
        }

    </style>
</head>
<body>
<form class="upload">
    <input type="file" accept=".zip" id="js-upload" >
    <div class="tip">点我上传</div>
</form>
<script>
    const uploadInput = document.querySelector('#js-upload');
    const form = document.querySelector('.upload');
    const textElement = document.querySelector('.tip');
    uploadInput.addEventListener('change', function (e) {
        const formData = new FormData();
        console.log(uploadInput.files);

        if(uploadInput.files.length > 0 && uploadInput.files[0].size > 0){
            const fileName = uploadInput.files[0].name;
            if(!fileName.endsWith('.zip')){
                alert('🥺暂时只支持上传zip文件');
                return resetForm();
            }
            formData.append('zipFile', uploadInput.files[0]);

            textElement.innerText = '正在上传：' + fileName;
            form.classList.add('forbid')
            // 下面地址用了模板插值
            fetch('/uploadRP?_csrf={{ ctx.csrf | safe }}', {
                method: 'POST',
                body: formData,
            }).then((res) => {
                console.log(res);
                if(res.status === 200){
                    const jump = confirm("上传成功，是否跳转到文档首页？");
                    if(jump){
                        const url = location.href.replace(':8081', '');
                        window.location.href = url;
                    }
                } else {
                    alert('上传失败');
                }
                resetForm();
            })
                .catch(() => {
                    alert('上传失败');
                    resetForm();
                })
        }
    });

    function resetForm() {
        textElement.innerText = '点我上传';
        form.reset();
        form.classList.remove('forbid');
    }

</script>
</body>
</html>
